<template>
  <div class="page-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="onTabsEvent">
      <el-tab-pane label="职务" name="post"><office-post/></el-tab-pane>
      <el-tab-pane label="职位" name="position"><office-position/></el-tab-pane>
      <el-tab-pane label="职级" name="grade"><office-grade/></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import {ref} from "vue";
// 工具页面不同进行显示
import OfficeGrade from "/@/components/office/officeGrade.vue";
import OfficePosition from "/@/components/office/officePosition.vue";
import OfficePost from "/@/components/office/officePost.vue";
import {TabsPaneContext} from "element-plus";

// 当前页
const activeName = ref<string>("post");

// 点击标签页
const onTabsEvent = ({props}: TabsPaneContext, event: Event) => {
  const {name} = props;
  if (name && name === activeName.value) return;
}

</script>
<style scoped lang="scss">

.page-container {
  padding: 1px;
}
</style>
